<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{dwxc_7_back.name}}</div>
        <span class="img_jia" @click="gjcb">重播轨迹</span>
      </div>
    </header>
    <div class="guiji_sj">
      <div class="guiji_Date">{{whytoday}}</div>
      <div>开始: <span class="BeginTime">{{start_time}}</span>&emsp;&emsp;结束: <span
          class="EndTime">{{end_time}}</span>&emsp;&emsp;&emsp;&emsp;
      </div>
    </div>
    <div class="guiji_sj_1" v-if="isAbnormal != null">
      <div class="img_yujin">
        <img v-if="isAbnormal !=0" src="../../assets/images/dwxc/jg.gif" alt="" class="img_1">
        <img v-else-if="isAbnormal==0" src="../../assets/images/dwxc/jg-lv.gif" alt="" class="img_1">
      </div>
      <div class="shijian" v-if="tiem_title !=''">
        <div class="bg_font">{{tiem_title.slice(0, 1)}}</div>
        <div class="bg_font">{{tiem_title.slice(1, 2)}}</div>
        <div class="bg_font">{{tiem_title.slice(2, 3)}}</div>
        <div class="bg_font">{{tiem_title.slice(3, 4)}}</div>
        <div class="bg_font_">-</div>
        <div class="bg_font">{{tiem_title.slice(4, 5)}}</div>
        <div class="bg_font">{{tiem_title.slice(5, 6)}}</div>
        <div class="bg_font_">-</div>
        <div class="bg_font">{{tiem_title.slice(6, 7)}}</div>
        <div class="bg_font">{{tiem_title.slice(7, 8)}}</div>
        &nbsp;&nbsp;
        <div class="bg_font">{{tiem_title.slice(8, 9)}}</div>
        <div class="bg_font">{{tiem_title.slice(9, 10)}}</div>
        <div class="bg_font_">:</div>
        <div class="bg_font">{{tiem_title.slice(10, 11)}}</div>
        <div class="bg_font">{{tiem_title.slice(11, 12)}}</div>
        <div class="bg_font_">:</div>
        <div class="bg_font">{{tiem_title.slice(12, 13)}}</div>
        <div class="bg_font">{{tiem_title.slice(13, 14)}}</div>
      </div>
    </div>
    <div class="ditu" id="ditu"></div>
    <div class="panel">
      <div class="panel-head panel-head2 ">
        <div class="head-item">
          <img src="../../assets/images/dwxc/dwpc_35.gif" class="ren" alt="">
          <span>工作人员:</span><span class="addusername name_me">{{personnel1}}</span>&nbsp;<span
            class="worker">{{personnel2}}</span>
        </div>
      </div>
      <div class="panel-body">

        <div v-for="(item, index) in fool_list" :key="index">
          <div class="panel-body—wenzi" v-if="item.type==1">{{item.FilePath}}</div>
          <div class="ly_play " data-url="" v-else-if="item.type==2">
            <span class="ly ly_yuyin" @click="yy_play(show_path+item.FilePath,$event)">
              <img src="../../assets/images/dwxc/yy_left.png" class="img_left" />
              <img src="../../assets/images/play.png" class="img_pp">
              <span class="ly_s">{{item.times}}"</span>
            </span>
          </div>
          <ul class="imgs_ul" v-else-if="item.type==3">
            <li class="tp_zs">
              <img :src="show_path+item.FilePath" alt="">
            </li>
          </ul>
          <div style="position: relative;padding:0 0.3704rem;margin-top: 0.2778rem;" v-else-if="item.type==4">
            <video controls class="video">
              <source :src="show_path+item.FilePath" type="video/mp4">
              <source :src="show_path+item.FilePath" type="video/ogg">
              您的浏览器不支持Video标签。
            </video>
          </div>

        </div>


      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'dwxc_7_trajectories',
    data() {
      return {
        map: null,
        centralpoint: ["106.57", "29.55"],//中心点
        path: [["106.57", "29.55"], [106.572122, 29.551176], [106.577271, 29.552501], [106.578258, 29.554600]],
        marker_list: [],
        obj_pink: [
          // { "jwd": ["106.57", "29.55"], "sj": "00:00" },
          // { "jwd": [106.572122, 29.551176], "sj": "00:00" },
          // { "jwd": [106.577271, 29.552501], "sj": "02:00" },
          // { "jwd": [106.578258, 29.554600], "sj": "01:00" },

        ],
        fool_list: [

        ],
        show_path: '',
        play_code: 1,
        p: null,
        ce_cunt: 0,
        settime: null,
        userid: null,
        dataId: null,
        dwxc_7_back: null,
        whytoday: '',//周几
        start_time: '',//开始时间
        end_time: '',//结束时间
        isAbnormal: null,//显示灯 0 绿
        tiem_title: '',//显示的时间
        personnel1: '',//工作人员
        personnel2: '',//工作人员
      }
    },
    destroyed() {
      // setTimeout( () => {
      //   this.$zoom.showImagesFn.hideContainer();
      // })
    },
    mounted() {
      var _this = this;
      _this.centralpoint = [_this.$global_msg.centerJwd.jd, _this.$global_msg.centerJwd.wd];
      this.inof1()
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
      document.body.style.background = "#ffffff"
    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      //  返回
      back() {
        // this.$router.push(this.dwxc_7_back.path);
        this.$router.back()
      },
      inof() {// 创建地图
        var _this = this
        this.map = new AMap.Map('ditu', {
          resizeEnable: true,
          zoomEnable: true, //地图是否可缩放，默认值为true
        });
        // 设置中心点
        // this.map.setCenter(this.centralpoint);
        // 设置地图级别 // PC上，参数zoom可设范围：[3,18]；// 移动端：参数zoom可设范围：[3,19]
        this.map.setZoom(19);

        this.settime = setInterval(function () {//没隔多少时间刷新当前位置
          _this.mapmarker(_this.obj_pink, _this.ce_cunt)
          _this.ce_cunt += 1;//第几个点
        }, 1000)

        this.mapline()

      },
      mapmarker(obj, guiji_cunt) {//创建坐标点/折线
        var _this = this
        if (guiji_cunt == obj.length) {
          clearInterval(_this.settime)
          console.log("执行了")
          return false
        }
        var img_url = require('../../assets/images/dwxc/guiji_ren.png');
        var img_url1 = require('../../assets/images/dwxc/qidian.png');
        var content = '';
        var marker = null;
        content = '';
        content += '<div style="text-align:center;position:relative">';
        if (_this.ce_cunt == 0) {
          content += '<img style="width: 0.6019rem;top: 0.0926rem;position: absolute;left: -0.037rem;" src="' + img_url1 + '"/>';
        } else {
          content += '<img style="width: 0.6019rem;top: 0.0926rem;position: absolute;left: -0.037rem;" src="' + img_url + '"/>';
        }
        content += '</div>';

        marker = new AMap.Marker({ // 创建一个 Marker 实例：
          position: this.obj_pink[_this.ce_cunt].sr_jwd.split(","),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          content: content,//图片
        });
        this.map.setCenter(this.obj_pink[_this.ce_cunt].sr_jwd.split(","));//设置中心点
        if (_this.ce_cunt > 1) {
          _this.map.remove(_this.marker_list[_this.marker_list.length - 1]);//删除前一个位置
        }
        _this.marker_list.push(marker)
        this.Classtime(this.obj_pink[_this.ce_cunt].addtime)
        _this.map.add(marker);
        if (_this.ce_cunt > 0) {//创建折线
          // console.log(_this.ce_cunt)
          _this.mapline("#25A303", [this.obj_pink[_this.ce_cunt - 1].sr_jwd.split(","), this.obj_pink[_this.ce_cunt].sr_jwd.split(",")])
          // if (this.obj_pink[_this.ce_cunt].sj != "00:00" && this.obj_pink[_this.ce_cunt - 1].sj != "00:00") {
          //   _this.mapline("#25A303", [this.obj_pink[_this.ce_cunt - 1].jwd, this.obj_pink[_this.ce_cunt].jwd])
          // } else {
          //   _this.mapline("#FFB401", [this.obj_pink[_this.ce_cunt - 1].jwd, this.obj_pink[_this.ce_cunt].jwd])
          // }
        }

      },
      mapline(color, path) {// 创建折线实例
        var polyline = new AMap.Polyline({
          path: path,
          borderWeight: 1, // 线条宽度，默认为 1
          strokeColor: "#00ACFB", // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });

        // 将折线添加至地图实例
        this.map.add(polyline);
      },
      yy_play(yy_path, e) {//语音播放
        var _this = this;
        var dom = $(e.currentTarget).find(".img_pp")
        if (_this.play_code == 1) {
          _this.p = null;
          console.log(yy_path);
          _this.p = plus.audio.createPlayer(yy_path);
          $(dom).attr("src", require('../../assets/images/play_dt.gif'))
          console.log("进入播放");
          _this.play_code = 2;
          // localStorage.setItem('domPlay', JSON.stringify(dom));
          // localStorage.setItem('domPlayString', yy_path);
          console.log(JSON.stringify(_this.p))
          _this.p.play(() => {
            //播放完毕
            _this.play_code = 1;
            $(dom).attr("src", require('../../assets/images/play.png'));
            _this.p.close();
          },
            function (e) {
              _this.play_code = 1;
              $(dom).attr("src", require('../../assets/images/play.png'));
              _this.p.close();
              alert("Audio play error: " + e.message);
            });
        } else {
          _this.play_code = 1;
          $(dom).attr("src", require('../../assets/images/play.png'));
          _this.p.close();
        }
      },
      stopPlay() {////切换后台语音停止
        if (this.p) {
          this.p.stop();
        }
        this.play_code = 1;
        $('.img_pp').attr("src", require('../../assets/images/play.png'));
        this.$forceUpdate();
      },
      inof1() {//获取地图列表
        var _this = this
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var date = new Date().getDay()
        var params = {
          dwId: this.userid,
          dataId: this.dataId,
          isType: 2,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getSpotInspectionRecord`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("地图列表：", res);
            if (res.data.code == 200) {
              // this.list = []
              // this.list = res.data.rows
              this.obj_pink = res.data.rows.spotInspectionRecordFour//轨迹
              this.start_time = res.data.rows.spotInspectionRecordTime.sra_BeginTime//开始时间
              this.end_time = res.data.rows.spotInspectionRecordTime.sra_EndTime//开始时间
              this.whytoday = this.Class(new Date(res.data.rows.spotInspectionRecordTime.BeginDateTime).getDay())//周几
              this.isAbnormal = res.data.rows.spotInspectionRecordTime.isAbnormal//显示红灯还是绿灯 0 绿
              this.fool_list = res.data.rows.spotInspectionRecordFive//上传的文字语音图片视频
              this.personnel1 = res.data.rows.spotInspectionRecordTwo[0].addusername
              this.personnel2 = res.data.rows.spotInspectionRecordTwo[0].worker
              
              this.inof()


            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
      },
      Class(i) {//周期
        var dataclass = {
          1: "周一",
          2: "周二",
          3: "周三",
          4: "周四",
          5: "周五",
          6: "周六",
          0: "周日",
        }
        return dataclass[i]
      },
      Classtime(t) {//点位的时间
        var mydate = new Date(t);
        var y = mydate.getFullYear() + ""; //获取完整的年份(4位,1970-????)
        var m = mydate.getMonth() + 1 + ""; //获取当前月份(0-11,0代表1月)
        var r = mydate.getDate() + ""; //获取当前日(1-31)
        var s = mydate.getHours() + ""; //获取当前小时数(0-23)
        var f = mydate.getMinutes() + ""; //获取当前分钟数(0-59)
        var mm = mydate.getSeconds() + ""; //获取当前秒数(0-59)

        if (m < 10) m = "0" + m;
        if (r < 10) r = "0" + r;
        if (s < 10) s = "0" + s;
        if (f < 10) f = "0" + f;
        if (mm < 10) mm = "0" + mm;
        // console.log(y + m + r + s + f + mm)
        this.tiem_title = y + m + r + s + f + mm
      },
      gjcb() {
        var _this = this;
        clearInterval(_this.settime)
        this.settime = null
        this.map.destroy()
        this.ce_cunt = 0
        this.inof()
      }



    },
    created() {
      this.show_path = this.$global_msg.Url.hosts + '';
      this.userid = localStorage.getItem("userId")
      this.dataId = localStorage.getItem("dwxc_7_dataid")
      this.dwxc_7_back = JSON.parse(localStorage.getItem("dwxc_7_back"))
      // console.log(6 % 7)

    },
    beforeDestroy() {//页面关闭前关闭定时器 （这个才有用）
      var _this = this;
      clearInterval(_this.settime)
      this.settime = null
    },

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    position: absolute;
    right: 0.3704rem;
  }

  /* 头部结束 */
  .guiji_sj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3704rem;
    margin-top: 1.8333333333333333rem;
    height: 0.9259rem;
    border-bottom: 1Px solid #ddd;
    padding-right: 0.1852rem;
    background: #F0EFF4;
    width: 100%;
    box-sizing: border-box;
  }

  .guiji_sj_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    padding-right: 0.1852rem;
    background: #F0EFF4;
    width: 100%;
    box-sizing: border-box;
  }

  .img_yujin {
    width: 1.2963rem;
    border-right: 1Px solid #ddd;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .img_1 {
    width: 0.7407rem;
    height: 0.7778rem;
  }

  @font-face {
    font-family: 'Jingti';
    src: url('../../assets/css/digifacewide.ttf');
  }

  .shijian {
    display: flex;
    color: #fff;
    /* height: 100%; */
  }

  .bg_font {
    /* width: 0.5556rem; */
    padding: 0 0.0926rem;
    text-align: center;
    color: #53FF57;
    /* height: 100%; */
    font-family: "Jingti";
    font-size: 0.3889rem;
    margin-left: 0.037rem;
    /* line-height: 1.3889rem; */
    transform: scale(1, 2);
    -ms-transform: scale(1, 2);
    -webkit-transform: scale(1, 2);
    -moz-transform: scale(1, 2);
    -o-transform: scale(1, 2);
    background-image: url("../../assets/images/dwxc/shijian_bg.png");
    background-size: 100% 100%;

  }

  .bg_font_ {
    text-align: center;
    /* height: 100%; */
    font-family: "Jingti";
    font-size: 0.3889rem;
    margin-left: 0.037rem;
    color: #000;
    font-weight: 600;

  }

  /* 地图 */
  .ditu {
    height: 7rem;
    width: 100%;
    box-sizing: border-box;

  }

  .panel {
    width: 100%;
    height: 6.6111rem;
    overflow-y: auto;
    box-sizing: border-box;
  }


  .panel-head {
    width: 100%;
    height: 1.3889rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #ddd solid;

    background: #fff;
  }


  .head-item {
    margin-left: 0.3704rem;
    margin-right: 0.37037rem;
    display: flex;
    align-items: center;

  }

  .panel-head .ren {
    width: 0.5rem;
    height: 0.574074rem;
    margin-right: 0.185185rem;
  }

  .panel .panel-body {
    width: 100%;
    /* position: absolute;
    top: 1.3889rem; */
  }


  /* 语音 */
  .yuyin {
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
  }

  .yuyin .yuyin-btn {
    width: 2.981481rem;
    height: 0.981481rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.37037rem;
    border: 1px #dbdbdb solid;
    position: relative;
    border-radius: 0.111111rem;
  }

  .yuyin .yuyin-btn .icon {
    width: 0.277777rem;
    height: 0.435185rem;
    margin-left: 0.277777rem;
    margin-right: 0.09rem;
  }

  .yuyin .yuyin-btn .play {
    display: none;
  }

  .yuyin .active .unplay {
    display: none;
  }

  .yuyin .active .play {
    display: flex;
  }

  .yuyin .yuyin-btn .left-i {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: -0.129629rem;
  }

  .yuyin .yuyin-btn .left-i img {
    width: 0.138888rem;
    height: 0.296296rem;
  }


  /* 语音说话 */
  .ly_box {
    position: relative;
    width: 7.3148rem;
    height: 0.9259rem;

  }

  .ly {
    margin: 0.2593rem 0 0 0rem;
    display: inline-block;
    width: 3.9815rem;
    height: 0.9259rem;
    line-height: 0.9259rem;
    border: 1Px solid #ddd;
    padding-left: 0.3704rem;
    border-radius: 0.09259259259259259rem;
    text-align: center;
    position: relative;
    box-sizing: border-box;
  }

  .ly img {
    height: 0.5555555555555556rem;
    position: absolute;
    top: 0.14814814814814814rem;
    left: 2.4074rem;
  }

  .del_ly {
    left: 4.62962962962963rem;

  }

  .ly_zhuan {
    left: 5.72962962962963rem;

  }

  .del_ly,
  .ly_zhuan {
    position: absolute;
    width: .796296rem;
    top: 0.3rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    /* display: none; */
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .ly_start {
    display: block;
  }

  .ly_play {
    margin-left: 0.3704rem;
  }

  .ly_yuyin {
    width: 2.963rem;
    height: 0.9259rem;
    position: relative;
  }

  .ly_yuyin img.img_pp {
    left: 0.3704rem;
  }

  .ly_yuyin .ly_s {
    left: 0.9259rem;
    position: absolute;
  }

  .img_left {
    position: absolute;
    left: -0.2593rem !important;
    z-index: 1;
  }

  .noclick {
    pointer-events: none;
  }

  .name_me {
    color: #5E589E;
  }

  .panel-fool {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.1852rem 0.1111rem 0.1852rem 0.2222rem;
    background: #F7F7F7;
    border-top: 1Px solid #D0D0D0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 200;
    box-sizing: border-box;
  }

  .img_dwpc_wz {
    width: 0.787rem;
    height: 0.787rem;
    margin-bottom: 0.0741rem;
  }

  .img_dwpc_pz {
    width: 1.1667rem;
    height: 0.9259rem;
  }

  .img_dwpc_font {
    width: 1.1667rem;
    height: 0.9259rem;
    /* display: none; */
  }

  textarea {
    /* display: none; */
    min-height: 0.7407rem;
    width: 7.3148rem;
    box-sizing: border-box;
    line-height: 0.9259rem;
    max-height: 2.7778rem;
    border: none;
    background: #fff;
  }

  /* 图片 */
  .imgs_ul {
    margin-left: 0.3704rem;
  }

  .tp_zs {
    position: relative;
    width: 4.5rem;
    overflow: hidden;
    border-radius: 0.18518518518518517rem;
    margin-top: 0.1111rem;
  }

  .tp_zs>img {
    width: 100%;
    height: 2.8703703703703702rem;
  }

  .panel-body—wenzi {
    margin-top: 0.1111rem;
    font-size: 0.3889rem;
    margin-left: 0.3704rem;
  }

  .video {
    width: 100%;
    height: 4.8703703703703702rem;

  }

  #videos {
    display: none;
  }

  .img_jia1 {
    width: 0.787rem;
    height: 0.787rem;
    margin-left: 0.1852rem;
  }

  .jsxc {
    width: 2.6852rem;
    height: 0.7778rem;
    border-radius: 0.9259rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #7AC0FE;
    font-size: 0.3889rem;
    margin-right: 0.2315rem;
  }

  .isShow {
    display: none !important;
  }

  .worker,
  .addusername {
    font-size: 0.3889rem;
  }

  .main {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
</style>
